<template>
  <div class="content-box" id="menu-left-btn-xe920">
    <div class="table-box">
      <t-table
        maxHeight="650px"
        :loading="loading"
        row-key="id"
        :data="props.tabDatas"
        :columns="columns"
        :table-layout="'fixed'"
        :selected-row-keys="selectedRowKeys"
        select-on-row-click
        @select-change="rehandleSelectChange"
        :resizable="false"
        drag-sort="row-handler"
        @drag-sort="onDragSort"
      >
        <!-- <template #sort="{ row }">
          <div class="solt-edit-box">
            <div v-if="!row.lock" class="solt-edit-boxnum" @click="setSlot(row.id)">
              <span>{{ row.sort }}</span>
              <i class="doorIcon">&#xe65d;</i>
            </div>
            <div class="solt-edit-box-input" v-else>
              <t-input-number
                @Enter="setSlotNum(row.sort, row.id, row.lock)"
                @Blur="setSlotNum(row.sort, row.id, row.lock)"
                v-model="row.sort"
                @change="fliterChange"
                auto-width
                theme="column"
                :min="0"
                :allowInputOverLimit="false"
                :max="9999"
                :maxLength="4"
              />
            </div>
          </div>
        </template> -->
        <template #isDisable="{ row }">
          <t-popup :content="row.message" destroy-on-close v-if="row.isDisable">
            <t-tag style="border: 0px; cursor: pointer; padding-left: 20px" variant="outline"
              ><ErrorCircleFilledIcon
            /></t-tag>
          </t-popup>
        </template>
        <template #drag="scope">
          <div class="move-icon">
            <!-- <t-icon name="move"></t-icon> -->
            <i class="doorIcon">&#xe689;</i>
            <span>{{ scope.rowIndex + 1 }}</span>
          </div>
        </template>
        <!-- props.tabDatas -->
        <template #coverUrl="{ row }">
          <img
            :src="$filters.getLinkUrl(row.coverUrl, '?imageView2/1/h/48/w/48/format/webp')"
            alt=""
            v-if="row.coverUrl"
            class="avator-box t-image--fit-cover t-image--position-center"
          />
          <div class="avator-box avator-box-null" v-else></div>
        </template>
        <template #typeId="{ row }">
          <t-select :disabled="true" :borderless="true" v-model="row.typeId" placeholder="未添加类型" v-if="row.typeId">
            <t-option v-for="item in props.tabType.select3" :key="item.id" :label="item.text" :value="item.id" />
          </t-select>
          <div v-else class="no-data">-</div>
        </template>
        <template #ageId="{ row }">
          <div class="cascader-box" v-if="row.ageId">
            <t-cascader
              :disabled="true"
              :borderless="true"
              placeholder="未添加年代"
              v-model="row.ageId"
              :options="props.tabType.select4"
              :keys="{
                value: 'id',
                children: 'children',
                label: 'text',
              }"
              clearable
              @change="onChange"
            />
          </div>
          <div v-else class="no-data">-</div>
        </template>
        <!-- <template #SpecificAge="{ row }">  
          <div class="text-ov-hid-style">  
            {{ row.SpecificAge ? row.SpecificAge : '--' }}
          </div> 
        </template>
        <template #size="{ row }">  
          <div class="text-ov-hid-style">{{ row.size ? row.size : '--' }}</div>
        </template> -->
        <template #levelId="{ row }">
          <t-select
            :disabled="true"
            :borderless="true"
            v-model="row.levelId"
            placeholder="未添加级别"
            v-if="row.levelId"
          >
            <t-option v-for="item in props.tabType.select1" :key="item.id" :label="item.text" :value="item.id" />
          </t-select>
          <div v-else class="no-data">-</div>
        </template>
        <template #concreteTimes="{ row }">
          <div v-if="row.concreteTimes">{{ row.concreteTimes }}</div>
          <div v-else class="no-data">-</div>
        </template>
        <template #size="{ row }">
          <div v-if="row.size">{{ row.size }}</div>
          <div v-else class="no-data">-</div>
        </template>
        <template #publishStatus="{ row }">
          <div>
            {{ row.location ? row.location : row.companyName }}
          </div>
        </template>
        <template #operation="{ row }" v-if="props.right">
          <div class="hw-box-style-flex operation-icon" v-if="store.projectRole !== 3">
            <div class="operation-box">
              <span
                v-if="row.isCompanyUser && row.openStatus !== 1"
                class="hw-click-cursor"
                :class="{ 'isEdit-role': row.isCompanyUser }"
                @click.stop="recovery(row.id, 2, row.isCompanyUser)"
                >编辑
              </span>
              <t-popup
                v-else
                attach="#menu-left-btn-xe920"
                class="placement"
                :content="!row.isCompanyUser ? '非本单位展品无法编辑' : '已授权展品无法编辑'"
                placement="top"
              >
                <span class="hw-click-cursor-lock" @click.stop="stopFn">编辑 </span>
              </t-popup>
            </div>

            <t-popup placement="bottom" trigger="hover">
              <div class="ellipsis-box">
                <i class="doorIcon">&#xe667;</i>
              </div>
              <!-- <div slot="content">触发元素是指触发浮层内容显示的元素</div> -->
              <template #content>
                <div class="operation-content">
                  <div class="operation-box">
                    <span class="hw-click-cursor" @click.stop="dimension(row.id)">标注 </span>
                  </div>
                  <div class="operation-box">
                    <a
                      target="_blank"
                      :href="doorUrl + 'exhibit?showpieceid=' + row.id"
                      class="hw-click-cursor hw-click-cursor-a"
                      >查看
                    </a>
                  </div>
                  <div class="operation-box operation-box-right">
                    <span class="hw-click-cursor" @click.stop="remove(row.id)">移除</span>
                  </div>
                </div>
              </template>
            </t-popup>
          </div>
        </template>
        <template #empty>
          <div class="hw-flex-style-c-c-c hw-box-style-flex-clm null-box-style">
            <img
              class="null-img-1"
              src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/exhibitNull.png"
              alt=""
            />
            <span class="null-title-1">暂无展品</span>
          </div>
        </template>
      </t-table>
    </div>
  </div>

  <messageModel
    submitText="移除"
    title="提示"
    :visible="visible1"
    problem="确定移除此展品？"
    message="移除后可再次添加"
    @closeClick="closeClick"
    @submitClick="submitClick"
  />
</template>
<script setup lang="ts">
// @ts-nocheck
import { doorUrl } from '@/utils/minxin';
import { ErrorCircleFilledIcon } from 'tdesign-icons-vue-next';
import { column, listdata, delColumn1, columnSolt } from '../../../../Exhibits/data';
import { MessagePlugin } from 'tdesign-vue-next';
import messageModel from '@/components/messageModel/index.vue';
import { treeList } from '@/api/user/user';
import { urls } from '@/utils/request/upload';
import { useRouter } from 'vue-router';
import { enterpriseList, exhibitDisable, exhibitMove, exhibitPublish, exhibitWithdrawn } from '@/api/exhibit/exhibit';
import { LockOnIcon } from 'tdesign-icons-vue-next';
import { ref, computed, reactive, defineExpose } from 'vue';
import { useProjectStore } from '@/store';

const router = useRouter();
const store = useProjectStore();
const props = defineProps({
  tabType: {
    type: Object,
  },
  tabDatas: {
    type: Array,
  },
  parmas: {
    type: Object,
  },
  right: {
    type: Boolean,
  },
});
const flag = ref(false);
const loading = ref(false);
const delId = ref(0);
const emit = defineEmits(['addExhibit', 'removeId', 'editInfo', 'dimensionOpen', 'setSlotId', 'setSlot', 'fliterSlot']);

const visible1 = ref(false);
const tableLayout = ref('fixed');
const emptyData = ref(false);
const tabDatas = ref([]);

const fliterChange = () => {
  emit('fliterSlot');
};
const columns = computed(() => {
  let dataColumn = [];
  if (!props.right) {
    dataColumn = [
      {
        colKey: 'row-select',
        type: 'multiple',
        width: 50,
        checkProps: ({ row, rowIndex }) => ({ disabled: row.isDisable }),
      },

      {
        colKey: 'isDisable',
        title: '',
        width: 1,
      },
      {
        colKey: 'drag', // 列拖拽排序必要参数
        title: '排序',
        width: 100,
      },
      { colKey: 'coverUrl', title: '图片', width: 100, ellipsis: true },
      { colKey: 'name', title: '展品名称', width: 100, ellipsis: true },
      { colKey: 'typeId', title: '类型', width: 80, ellipsis: true },
      { colKey: 'ageId', title: '年代', width: 240, ellipsis: true },
      { colKey: 'SpecificAge', title: '具体年代', width: 120, ellipsis: true },
      { colKey: 'size', title: '尺寸', width: 200, ellipsis: true },
      { colKey: 'levelId', title: '级别', width: 150, ellipsis: true },
      {
        colKey: 'location',
        title: '收藏单位',
        width: 150,
        ellipsis: true,
      },
    ];
  } else {
    dataColumn = columnSolt;
  }
  dataColumn.forEach((el) => {
    if (el.title == '状态') {
      el.title = '收藏单位';
      // el.colKey = 'location';
    }
  });
  return dataColumn;
});
const selectedRowKeys = ref([]);
const setSlot = (id: number) => {
  emit('setSlot', id);
};
const stopFn = () => {};
// const setSlotNum = (num: number, id: number, lock: boolean) => {
//   console.log(num);
//   if (!lock) {
//     return;
//   }
//   emit('setSlotId', id, num);
// };
const onDragSort = ({ newData }) => {
  console.log('{ newData }-----', newData);
  let idList = newData.map((element) => {
    // console.log(element.id);

    return element.id;
  });
  console.log(idList);

  emit('setSlotId', idList);
};
const changeVlaue = (e: any) => {
  parmas.menu = e;
  // init();
};
const publish = (e: number) => {
  //发布展品
  exhibitPublish(e).then((res) => {
    if (res.statusCode == 200) {
      MessagePlugin.success(`发布成功`);
      // init();
    } else {
      MessagePlugin.error(res.errors);
    }
  });
};
const recovery = (e?: number, type: number, role: Boolean) => {
  if (type == 2 && !role) {
    return;
  }
  emit('editInfo', e);
  // router.push({
  //   path: '/prijectMenu/lookExhibit',
  //   query: {
  //     id: e,
  //     status: type,
  //   },
  // });
};
const dimension = (id: number) => {
  emit('dimensionOpen', id);
};
const withdrawn = (e: number) => {
  exhibitWithdrawn(e).then((res: any) => {
    if (res.statusCode == 200) {
      MessagePlugin.success(`撤回成功`);
      // init();
    } else {
      MessagePlugin.error(res.errors);
    }
  });
};

const onChange = (pageInfo) => {};
const addaddExhibits = (e: number) => {
  //新建展品
  router.push({ path: '/Exhibits/addExhibitLibrary', query: { type: e } });
};

const rehandleSelectChange = (value, { selectedRowData }) => {
  //恢复列表选项
  selectedRowKeys.value = value;
  console.log(selectedRowKeys.value, '列表选项');
  emit('addExhibit', selectedRowKeys.value);
};
const remove = (e) => {
  delId.value = e;
  visible1.value = true;
  store.setModelIndex(true);
};
const closeClick = () => {
  visible1.value = false;
  store.setModelIndex(false);
};
const submitClick = () => {
  //删除展品
  emit('removeId', delId.value);
  visible1.value = false;
  store.setModelIndex(false);
};
const clearList = () => {
  selectedRowKeys.value = [];
};
defineExpose({
  clearList,
});
</script>

<style lang="less" scoped>
@import '../../../../Exhibits/index.less';
.card-box {
  width: 100%;
  min-height: 80vh;
  background: #fefefe;
  border-radius: @radius-hw-box1;
  border: 1px solid #e62b17;
}
.content-box {
  width: 100%;
}
.t-table--bordered td,
.t-table--bordered th {
  border: none;
}
.table-box {
  width: 100%;
  // min-height: 635px;
  margin: 24px 0;
}
.t-tabs__nav-container.t-is-top::after {
  display: none;
  background: #fefefe;
}
.heards-box {
  width: 100%;
  background: #fefefe;
  border-radius: 2px;
  padding: 10px 16px;
  padding-bottom: 0;
  border: 1px solid #e62b17;
  margin-bottom: 20px;
}
.t-button--variant-outline {
  border-color: var(--td-border-level-2-color);
}
.t-button__text {
  color: #fff;
}
.operation-box {
  display: flex;
  // justify-content: center;
  align-items: center;
  span {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e62b17;
    margin-right: 8px;
  }
  .hw-click-cursor-lock {
    color: #ffa994 !important;
  }
}
.pop-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px;
}
.pop-item {
  display: flex;
  width: 100%;
  padding: 7px 20px;
  font-size: 13px;
}
.pop-item:hover {
  background: #f0e9e1;
  color: rgba(210, 173, 119, 0.9);
}
.select-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.select-box-item {
  padding: 5px 16px;
  border-radius: @radius-hw-box1;
  border: 1px solid #e7e7e7;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 14px;
  margin-right: 10px;
}
.select-box-item-active {
  border: 1px solid #e62b17;
  color: #e62b17;
}
.t-col {
  margin-top: 0px;
  margin-bottom: 0px;
}
:deep(.t-card__body) {
  padding-top: 24px;
}
.footer-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.avator-box {
  width: 48px;
  height: 48px;
  border-radius: 1px;
}
.avator-box-null {
  background: #d8d8d8;
}
.style-publish1 {
  color: #c5c5c5;
}
.style-publish2 {
  color: #ed7b2f;
}
.style-publish3 {
  color: #00a870;
}
.style-publish4 {
  color: #ed7b2f;
}
.content-box {
  width: 100%;
  // max-width: 65vw;
  margin: 0 auto;
  :deep(.t-input.t-is-disabled) {
    background: #fff;
  }
  .table-box {
    width: 100%;
    // min-height: 50vh;
  }
  :deep(.t-table table) {
    width: auto;
    min-width: 100% !important;
  }
  :deep(.t-input.t-is-disabled .t-input__inner) {
    color: rgba(0, 0, 0, 0.9);
  }

  :deep(.t-select.t-select-input--borderless .t-select__right-icon) {
    display: none;
  }
  :deep(.t-cascader .t-fake-arrow) {
    display: none;
  }
  :deep(.t-select-input--borderless .t-input) {
    border: none;
  }
}
.isEdit-role {
  color: @color-text-color3;
}

:deep(.t-table) {
  padding: 12px;
  border: 1px solid #e7e7e7;
}
:deep(.t-table--layout-fixed) {
  width: 100%;
}
// a:hover {
//   color: #e62b17;
// }
.operation-box {
  .hw-click-cursor-a:hover {
    color: #e62b17;
    text-decoration: none;
  }
  :deep(a:hover) {
    color: #e62b17 !important;
  }
}
.operation-box-right {
  margin-right: 0;
}
.hw-click-cursor-a {
  font-family: PingFangSC, PingFang SC;
  margin-right: 8px;
}
.solt-edit-box {
  display: flex;
  .doorIcon {
    cursor: pointer;
    font-size: 16px;
    color: RGBA(128, 128, 128, 1);
  }
}
.solt-edit-boxnum {
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
    margin-right: 16px;
  }
}
.solt-edit-box-input {
  width: 90%;
  height: 36px;
  :deep(.t-input-number.t-is-controls-right .t-input) {
    padding-right: 0;
    height: 36px;
  }
}
.solt-edit-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  :deep(.t-input-number.t-input-number--auto-width.t-is-controls-right) {
    width: 100% !important;
  }
  :deep(.t-input--auto-width) {
    width: 100% !important;
  }
}
:deep(.t-table-td--ellipsis) {
  max-width: 200px;
}
.cascader-box {
  :deep(.t-select-input) {
    border: none;
    box-shadow: none;
  }
  :deep(.t-input__wrap) {
    border: none;
    box-shadow: none;
  }
  :deep(.t-input) {
    border: none;
    box-shadow: none;
  }
}

.operation-icon {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  > div {
    margin: 0 10px;
  }
}
.ellipsis-box {
  width: 22px;
  height: 22px;
  cursor: pointer;
  text-align: center;
  font-size: 22px;
  &:hover {
    border-radius: 4px;
    background: #d9d9d9;
  }
}
.operation-content {
  width: 36px;
  > div {
    white-space: nowrap;
    padding: 6px 2px;
    line-height: 24px;
  }
}
.move-icon {
  width: 100px;
  &:hover i {
    color: #e62b17;
  }
  i {
    margin-right: 4px;
  }
}
/deep/.t-table__cell-check {
  padding-left: 10px !important;
}
/deep/.t-table__header {
  border-radius: 20px !important;
  overflow: hidden !important;
}
.no-data {
  // text-align: center;
  padding-left: 8px;
}

:deep(.t-table__header) {
  z-index: 999 !important;
}
</style>
